<template>
  <div class="cart-container nav-bottom">
    <div class="cart-login" v-if="!cartList || cartList.length == 0">
      <div>
        <img class="mobile" src="imgs/cart.png">
      </div>
      <div class="text">购物车空空如也，快去逛逛吧~</div>
    </div>
    <!-- 购物车状态提示 -->
    <div class="status-tip-box">
      <van-cell class="status-tip" v-if="cartList && cartList.length > 0">
        <div slot="title">共<span class="num">{{cartList.length}}</span>件商品</div>
        <div slot="extra"><span class="edit" @click="editFlag = !editFlag">{{editFlag ? '完成' : '编辑'}}</span></div>
      </van-cell>
    </div>
    <!-- 购物车列表 -->
    <div class="cart-list" v-if="cartList && cartList.length > 0">
      <div class="cart-item circle-bg" v-for="(cart, index) in cartList" :key="index">
        <div class="goods-sel">
          <van-checkbox v-model="cart.checked || false" @click="checkCart(cart)"></van-checkbox>
        </div>
        <div class="order-goods-item">
          <van-image :src="cart.goodsPic" @click="checkCart(cart)"/>
          <div class="goods">
            <span class="title van-multi-ellipsis--l2" @click="$router.push({path: '/goodsDetail', query: {id: cart.goodsId}})">{{cart.goodsName}}</span>
            <span class="num"></span>
            <div class="price">
              <span><em>¥</em>{{cart.goodsPrice | fentoyuan}}</span>
              <van-stepper :step="0" @plus="cartPlus(cart)" @minus="cartMinus(cart)" :disable-input="true" theme="round" input-width="30px" button-size="20px" v-model="cart.goodsNum"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 结算 -->
    <div class="van-submit-bar-box">
      <van-submit-bar :price="cartMoneyChecked || 0" button-text="结算" @submit="orderPreview" v-if="cartList && cartList.length > 0 && !editFlag">
        <van-checkbox :value="cartAllChecked" @click="checkCartAll">全选</van-checkbox>
      </van-submit-bar>
      <van-submit-bar button-text="删除" @submit="deleteCart" v-if="cartList && cartList.length > 0 && editFlag">
        <van-checkbox :value="cartAllChecked" @click="checkCartAll">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import constants from '@/config/constants'
import userApi from '@/api/userApi'

export default {
  name: 'cart',
  data () {
    return {
      editFlag: false
    }
  },
  computed: {
    ...mapState(['user', 'cartList', 'cartAllChecked', 'cartMoneyChecked'])
  },
  created () {
    this.$store.commit(constants.STORE.UPDATE_CART_LIST);
  },
  methods: {
    /* 增加商品数量 */
    async cartPlus (cart) {
      await userApi.updateCart({cartId: cart.id,goodsNum: cart.goodsNum+1});
      this.$store.commit(constants.STORE.UPDATE_CART_LIST);
    },
    /* 减少商品数量 */
    async cartMinus (cart) {
      await userApi.updateCart({cartId: cart.id,goodsNum: cart.goodsNum-1});
      this.$store.commit(constants.STORE.UPDATE_CART_LIST);
    },
    /* 删除购物车 */
    deleteCart () {
      this.$dialog.confirm({
        title: '',
        message: '确认删除?'
      })
      .then(() => {
        this.$store.commit(constants.STORE.DELETE_CART);
      })
      .catch(() => {
        // on cancel
      });
    },
    /* 选中购物车 */
    checkCart (cart) {
      this.$store.commit(constants.STORE.UPDATE_CART_CHECKED, {
        id: cart.id,
        checked: !cart.checked
      })
    },
    /* 选中全部购物车 */
    checkCartAll () {
      this.$store.commit(constants.STORE.ALL_CART_CHECKED);
    },
    orderPreview () {
      // 获取勾选的购物车
      var cartIdsArray = new Array();
      for(var i=0; i<this.cartList.length; i++){
        if(this.cartList[i].checked){
          cartIdsArray.push(this.cartList[i].id);
        }
      }
      if(cartIdsArray.length == 0){
        this.$toast.fail("请选择要购买的商品");
        return;
      }
      this.$router.push('/orderPreview');
    }
  }
}
</script>

<style lang="scss">
.cart-container{
  .cart-list{
    padding-top: 55px;
    padding-bottom: 55px;
    .cart-item{
      background-color: #fff;
      height: 100px;
      display: flex;
      align-items: center;
      margin: 0px 10px 5px 10px;
      padding: 0 10px 0px 0px;
      .goods-sel{
        display: flex;
        justify-content: flex-start;
        margin: 0px 15px 0px 10px;
        .van-checkbox{
          .van-checkbox__icon{
            font-size: 17px;
          }
          .van-checkbox__icon--checked{
            .van-icon{
              background-color: #e9b461;
              border-color: #e9b461;
            }
          }
        }
      }
      .order-goods-item{
        flex: 1;
      }
      /deep/ .price span{
        color: #e1212b;
      }
      /deep/ .van-stepper--round{
        .van-stepper__plus{
          background-color: #eecc89;
        }
        .van-stepper__minus{
          border-color: #eecc89;
        }
        .van-stepper__input{
          color: #333;
          font-weight: normal;
        }
      }
    }
  }
  .van-submit-bar-box{
    position: fixed;
    bottom: 50px;
    left: 0px;
    z-index: 2;
    height: 55px;
    width: calc(100% - (10px) * 2) !important;
    background: #f0f0f0;
    margin: 0 10px;
  }
  .van-submit-bar{
    margin: 0 10px;
    border-radius: 5px;
    background: #fff;
    width: calc(100% - (10px) * 2) !important;
    bottom: 55px;
    .van-submit-bar__bar{
      border-top: 1px solid #f2f2f2;
      padding: 0 7px;
      height: 50px;
      justify-content: space-between;
      .van-checkbox{
        margin-left: 4px;
        .van-checkbox__icon{
          height: inherit;
          .van-icon{
            font-size: 14px;
          }
        }
        .van-checkbox__icon--checked{
          .van-icon{
            background-color: #e9b461;
            border-color: #e9b461;
          }
        }
      }
    }
    /deep/ .van-submit-bar__button{
      height: 34px;
      width: 80px;
    }
    /deep/ .van-submit-bar__price{
      font-size: 14px;
    }
    /deep/ .van-submit-bar__text{
      font-size: 14px;
    }
    /deep/ .van-checkbox__label{
      font-size: 14px;
    }
  }
}
</style>
